<template>
  <div class="flow-form">
    <el-form :model="dataForm" :rules="dataRules" ref="dataForm" label-width="120px" label-position="right" :disabled="setting.readonly" size="small">
      <!-- 基础信息 -->
      <el-card class="section-card" shadow="never">
        <div slot="header" class="section-header">
          <i class="el-icon-setting" style="color:#409EFF; margin-right: 6px;"></i>
          <span>基础信息</span>
        </div>
        <el-row :gutter="16">
          <el-col :span="8">
            <el-form-item label="校区品牌" prop="campusBrand">
              <el-select v-model="dataForm.campusBrand" placeholder="请选择校区品牌" clearable filterable style="width: 100%" @change="handleBrandChange">
                <el-option v-for="item in brandOptions" :key="item.value" :label="item.fullName" :value="item.enCode" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开业校区" prop="campusId">
              <el-select v-model="dataForm.campusId" placeholder="请选择开业校区" filterable clearable style="width: 100%" @change="onCampusChange">
                <el-option v-for="(item, index) in campusOptions" :key="index" :label="item.fullName" :value="String(item.id)" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开业日期" prop="openingDate">
              <el-date-picker v-model="dataForm.openingDate" type="date" placeholder="请选择开业日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%" :picker-options="datePickerOptions" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 新增：辅导师选择、落地辅导日期(多选)、开业类型 -->
        <el-row :gutter="16">
          <el-col :span="8">
            <el-form-item label="开业辅导师" prop="instructorId">
              <user-select v-model="dataForm.instructorId" placeholder="请选择辅导师" clearable required style="width: 100%"></user-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="落地辅导日期" prop="guidanceDates" v-if="dataForm.openingType !== 'multi'">
              <el-date-picker v-model="dataForm.guidanceDates" type="dates" placeholder="可多选日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开业类型" prop="openingType">
              <el-radio-group v-model="dataForm.openingType">
                <el-radio label="new">新校开业</el-radio>
                <el-radio label="multi">多校自主开业</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 新增：校区容量相关字段（学位数、床位数） -->
        <el-row :gutter="16">
          <el-col :span="8">
            <el-form-item label="学位数" prop="degreeCount">
              <el-input-number v-model="dataForm.degreeCount" :min="0" :style="{ width: '100%' }" placeholder="输入学位数" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="床位数" prop="bedCount">
              <el-input-number v-model="dataForm.bedCount" :min="0" :style="{ width: '100%' }" placeholder="输入床位数" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 新增：基础信息内的相关文档上传 -->
        <el-card class="subsection-card" shadow="never">
          <div slot="header" class="section-header">
            <i class="el-icon-document" style="color:#909399; margin-right: 6px;"></i>
            <span>开业相关文档</span>
          </div>
          <el-row :gutter="16">
            <el-col :span="6">
              <el-form-item label="开业计划表" prop="openingPlanDocs">
                <custom-upload-fz :type="'plan'" v-model="dataForm.openingPlanDocs" :fileSize="500" sizeUnit="MB" :limit="5" buttonText="点击上传文件"></custom-upload-fz>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="校区市调表" prop="marketResearchDocument">
                <custom-upload-fz :type="'survey'" v-model="dataForm.marketResearchDocument" :fileSize="500" sizeUnit="MB" :limit="5" buttonText="点击上传文件"></custom-upload-fz>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="开业后月行事历" label-width="150px" prop="openingCalendarDocs">
                <custom-upload-fz :type="'calendar'" v-model="dataForm.openingCalendarDocs" :fileSize="500" sizeUnit="MB" :limit="5" buttonText="点击上传文件"></custom-upload-fz>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="价格表文档" prop="priceDocument">
                <custom-upload-fz :type="'price'" v-model="dataForm.priceDocument" :fileSize="10" sizeUnit="MB" :limit="5" buttonText="点击上传文件"></custom-upload-fz>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </el-card>

      <!-- 招生数据统计 -->
      <el-card class="section-card" shadow="never">
        <div slot="header" class="section-header">
          <i class="el-icon-data-analysis" style="color: rgb(103, 194, 58); margin-right: 6px;"></i>
          <span>招生数据统计</span>
        </div>

        <!-- 开业辅导前招生人数 -->
        <el-form-item label="落地辅导前招生情况" prop="enrollmentInfo" label-width="150px">
          <el-input v-model="dataForm.enrollmentInfo" placeholder="请详细描述辅导前的招生情况" type="textarea" :rows="3" maxlength="500" show-word-limit />
        </el-form-item>

        <el-card class="section-card" shadow="never">
          <div slot="header" class="section-header">
            <i class="el-icon-money" style="color: #E6A23C; margin-right: 6px;"></i>
            <strong style="color: #E6A23C;">托管招生与收费标准</strong>
          </div>

          <!-- 顶部统计区域 -->
          <div class="trusteeship-summary" style="display: flex">
            <el-col :span="8">
              <el-form-item label="托管总人数">
                <el-input-number v-model="dataForm.totalCareCount" :min="0" placeholder="输入总人数" :style="{ width: '100%' }" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="预计收入">
                <el-input v-model="dataForm.expectedIncome" readonly placeholder="自动计算各项收费×人数总和" :style="{ width: '100%' }">
                  <template slot="append">
                    元/月
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </div>
          <!-- 托管服务项目（表格形式） -->
          <div class="other-services-section">
            <div class="other-services-header">
              <span class="other-services-title">托管服务项目</span>
              <el-button type="primary" size="mini" @click.native.prevent="addCareService" icon="el-icon-plus">添加</el-button>
            </div>

            <div v-if="dataForm.careServices.length === 0" class="no-other-services">
              <i class="el-icon-info"></i>
              <span>暂无托管服务项目</span>
            </div>

            <el-table v-else :data="dataForm.careServices" border :size="'small'" style="width: 100%" :header-cell-style="{ whiteSpace: 'nowrap' }" :cell-style="{ whiteSpace: 'nowrap' }">
              <el-table-column label="服务类型" align="center" :min-width="160">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.serviceCode" placeholder="请选择托管服务" filterable style="width:100%" @change="onCareServiceChange(scope.$index)">
                    <el-option v-for="opt in careServiceOptions" :key="opt.enCode" :label="opt.fullName" :value="opt.enCode" :disabled="isServiceTypeUsed(opt.enCode, scope.$index)" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="人数" align="center" :min-width="140">
                <template slot-scope="scope">
                  <el-input-number
                    v-model="scope.row.studentCount"
                    :min="0"
                    :max="9999"
                    controls-position="right"
                    style="width: 100%;"
                    @change="
                      () => {
                        calculateMonthlyIncome()
                      }
                    "
                  />
                </template>
              </el-table-column>
              <el-table-column label="服务收费" align="center" :min-width="220">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.fee" @input="formatCareServiceFee(scope.$index, $event)" placeholder="输入价格" style="width: 100%;" class="input-with-select">
                    <el-select v-model="scope.row.feeCycle" slot="prepend" placeholder="收费周期" @change="calculateMonthlyIncome">
                      <el-option label="按周收费" value="week"></el-option>
                      <el-option label="按月收费" value="month"></el-option>
                      <el-option label="按学期收费" value="semester"></el-option>
                    </el-select>
                    <template slot="append">
                      元
                    </template>
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column label="月收入" align="center" :min-width="160">
                <template slot-scope="scope">
                  <span>
                    {{
                      (() => {
                        const count = Number(scope.row.studentCount || 0)
                        const fee = parseFloat(scope.row.fee || 0)
                        const cycle = scope.row.feeCycle || 'month'
                        const monthlyFee = cycle === 'semester' ? fee / 4.5 : cycle === 'week' ? fee * 4 : fee
                        return (monthlyFee * count).toFixed(2)
                      })()
                    }}
                    元
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" :min-width="120">
                <template slot-scope="scope">
                  <el-button type="danger" size="mini" @click="removeCareService(scope.$index)" icon="el-icon-delete">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div class="section-divider"></div>

          <!-- 其他收费项目 -->
          <div class="other-services-section">
            <div class="other-services-header">
              <span class="other-services-title">其他收费项目</span>
              <el-button type="primary" size="mini" @click.native.prevent="addOtherService" icon="el-icon-plus">添加</el-button>
            </div>

            <div v-if="dataForm.otherServices.length === 0" class="no-other-services">
              <i class="el-icon-info"></i>
              <span>暂无其他收费项目</span>
            </div>

            <el-table v-else :data="dataForm.otherServices" style="width: 100%" border size="small">
              <el-table-column label="服务内容" align="center" :min-width="180">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.serviceName" placeholder="请输入服务内容" maxlength="50"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="招生人数" align="center" :min-width="140">
                <template slot-scope="scope">
                  <el-input-number v-model="scope.row.studentCount" :min="0" :max="9999" controls-position="right" style="width: 100%;" @change="calculateMonthlyIncome" />
                </template>
              </el-table-column>
              <el-table-column label="服务收费" align="center" :min-width="220">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.fee" @input="formatOtherServiceFee(scope.$index, $event)" placeholder="输入价格" style="width: 100%;" class="input-with-select">
                    <el-select v-model="scope.row.feeCycle" slot="prepend" placeholder="收费周期" @change="calculateMonthlyIncome">
                      <el-option label="按周收费" value="week"></el-option>
                      <el-option label="按月收费" value="month"></el-option>
                      <el-option label="按学期收费" value="semester"></el-option>
                    </el-select>
                    <template slot="append">
                      元
                    </template>
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column label="月收入" align="center" :min-width="160">
                <template slot-scope="scope">
                  <span>
                    {{
                      (() => {
                        const count = Number(scope.row.studentCount || 0)
                        const fee = parseFloat(scope.row.fee || 0)
                        const cycle = scope.row.feeCycle || 'month'
                        const monthlyFee = cycle === 'semester' ? fee / 4.5 : cycle === 'week' ? fee * 4 : fee
                        return (monthlyFee * count).toFixed(2)
                      })()
                    }}
                    元
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" :min-width="120">
                <template slot-scope="scope">
                  <el-button type="danger" size="mini" @click="removeOtherService(scope.$index)" icon="el-icon-delete">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-card>
      <!-- 对校长的评价 -->
      <el-card class="section-card" shadow="never">
        <div slot="header" class="section-header">
          <i class="el-icon-star-on" style="color: #E6A23C; margin-right: 6px;"></i>
          <span>对校长的评价</span>
        </div>
        <!-- 评分布局：网格避免单项独占一行 -->
        <el-row :gutter="16">
          <el-col :span="6">
            <el-form-item label="执行力" prop="executionScore">
              <div class="satisfaction-rating">
                <el-rate v-model="dataForm.executionScore" :max="5" text-color="#ff9900" :colors="rateColors" allow-half @change="handleRateChange('executionScore', $event)" />
                <div class="rating-display">
                  <span class="rating-stars">{{ starToPoints(dataForm.executionScore) }}分</span>
                  <span class="rating-label" :class="getRatingClass(starToPoints(dataForm.executionScore))">{{ getRatingText(starToPoints(dataForm.executionScore)) }}</span>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="招生营销力" prop="marketingScore">
              <div class="satisfaction-rating">
                <el-rate v-model="dataForm.marketingScore" :max="5" text-color="#ff9900" :colors="rateColors" allow-half @change="handleRateChange('marketingScore', $event)" />
                <div class="rating-display">
                  <span class="rating-stars">{{ starToPoints(dataForm.marketingScore) }}分</span>
                  <span class="rating-label" :class="getRatingClass(starToPoints(dataForm.marketingScore))">{{ getRatingText(starToPoints(dataForm.marketingScore)) }}</span>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="团队管理" prop="teamManagementScore">
              <div class="satisfaction-rating">
                <el-rate v-model="dataForm.teamManagementScore" :max="5" text-color="#ff9900" :colors="rateColors" allow-half @change="handleRateChange('teamManagementScore', $event)" />
                <div class="rating-display">
                  <span class="rating-stars">{{ starToPoints(dataForm.teamManagementScore) }}分</span>
                  <span class="rating-label" :class="getRatingClass(starToPoints(dataForm.teamManagementScore))">{{ getRatingText(starToPoints(dataForm.teamManagementScore)) }}</span>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="沟通力" prop="communicationScore">
              <div class="satisfaction-rating">
                <el-rate v-model="dataForm.communicationScore" :max="5" text-color="#ff9900" :colors="rateColors" allow-half @change="handleRateChange('communicationScore', $event)" />
                <div class="rating-display">
                  <span class="rating-stars">{{ starToPoints(dataForm.communicationScore) }}分</span>
                  <span class="rating-label" :class="getRatingClass(starToPoints(dataForm.communicationScore))">{{ getRatingText(starToPoints(dataForm.communicationScore)) }}</span>
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="16">
          <el-col :span="8">
            <div class="comprehensive-score">
              <span class="score-description">综合评分：</span>
              <span class="score-display">{{ calculateAverageScore() }}分</span>
              <span class="score-description">{{ getScoreText(calculateAverageScore()) }}</span>
            </div>
          </el-col>
        </el-row>
        <el-divider class="section-divider" />
        <!-- 评价内容布局重设：整行展示 -->
        <el-row :gutter="16">
          <el-col :span="24">
            <el-form-item label="评价补充内容" prop="evaluationContent">
              <el-input v-model="dataForm.evaluationContent" type="textarea" :rows="4" placeholder="请详细您对校长评价的补充内容" maxlength="1000" show-word-limit style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="section-card" shadow="never">
        <div slot="header" class="section-header">
          <i class="el-icon-picture" style="color:#409EFF; margin-right: 6px;"></i>
          <span>图片上传</span>
        </div>
        <!-- 图片上传 -->
        <el-row>
          <el-col :span="24" v-if="judgeShow('campusEnvironmentPhotos')" class="upload-section">
            <el-form-item label="校区环境照片" prop="campusEnvironmentPhotos" required>
              <custom-upload-img :type="'campusEnvironmentPhotos'" v-model="dataForm.campusEnvironmentPhotos" :fileSize="500" sizeUnit="MB" :limit="9"></custom-upload-img>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="judgeShow('teamStylePhotos')" class="upload-section">
            <el-form-item label="团队风采图片" prop="teamStylePhotos">
              <custom-upload-img :type="'teamStylePhotos'" v-model="dataForm.teamStylePhotos" :fileSize="500" sizeUnit="MB" :limit="9"></custom-upload-img>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="judgeShow('dailyProcessPhotos')" class="upload-section">
            <el-form-item label="一日流程图片" prop="dailyProcessPhotos">
              <custom-upload-img :type="'dailyProcessPhotos'" v-model="dataForm.dailyProcessPhotos" :fileSize="500" sizeUnit="MB" :limit="9"></custom-upload-img>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="judgeShow('openingActivityPhotos')" class="upload-section">
            <el-form-item label="开业活动图片" prop="openingActivityPhotos">
              <custom-upload-img :type="'openingActivityPhotos'" v-model="dataForm.openingActivityPhotos" :fileSize="500" sizeUnit="MB" :limit="9"></custom-upload-img>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <!-- 其他信息 -->
      <el-card class="section-card" shadow="never">
        <div slot="header" class="section-header">
          <i class="el-icon-info" style="color:#409EFF; margin-right: 6px;"></i>
          <span>其他信息</span>
        </div>
        <el-col :span="24">
          <el-form-item class="vertical-form-item" label="备注信息" prop="remark">
            <el-input v-model="dataForm.remark" type="textarea" :rows="4" placeholder="其他备注信息" maxlength="1000" show-word-limit style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-card>
    </el-form>
  </div>
</template>

<script>
import comMixin from '@/views/workFlow/workFlowForm/mixin'
import { getDictionaryData, DICTIONARY_TYPES } from '@/utils/dictionaryConstants'
import { Create as saveGuidance, Update as updateGuidance, Info as getGuidanceInfo } from '@/api/campus/guidance'
import { getCampusSelector } from '@/api/campus/campus'
export default {
  name: 'GuidanceForm',
  mixins: [comMixin],
  props: {
    currentRow: { type: Object, default: () => ({}) },
    isDetail: { type: Boolean, default: false },
    editData: { type: Object, default: null }
  },
  data() {
    return {
      eventType: '',
      dictionaryData: { promotionChannels: [], consultChannels: [], trainCertificateType: [] },
      setting: { formOperates: [] },
      brandOptions: [],
      campusOptions: [],
      campusLoading: false,
      instructorOptions: [],
      careServiceOptions: [],
      rateColors: ['#F56C6C', '#E6A23C', '#E6A23C', '#67C23A', '#67C23A'],
      dataForm: this.getInitialFormData(),
      dataRules: {
        campusBrand: [{ required: true, message: '校区品牌不能为空', trigger: 'change' }],
        campusId: [{ required: true, message: '开业校区不能为空', trigger: 'change' }],
        openingDate: [{ required: true, message: '开业日期不能为空', trigger: 'change' }],
        guidanceDates: [
          {
            required: true,
            validator: (rule, value, callback) => {
              // 多校开业类型时不验证落地辅导日期
              if (this.dataForm.openingType === 'multi') {
                callback()
              } else if (Array.isArray(value) && value.length > 0) {
                callback()
              } else {
                callback(new Error('落地辅导日期至少选择1天'))
              }
            },
            trigger: 'change'
          }
        ],
        instructorId: [{ required: true, message: '辅导师不能为空', trigger: 'change' }],
        openingType: [{ required: true, message: '开业类型不能为空', trigger: 'change' }],
        // 新增：学位数与床位数必填
        degreeCount: [{ type: 'number', required: true, message: '学位数不能为空', trigger: 'change' }],
        bedCount: [{ type: 'number', required: true, message: '床位数不能为空', trigger: 'change' }],
        openingPlanDocs: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (Array.isArray(value) && value.length > 0) {
                callback()
              } else {
                callback(new Error('开业计划表至少上传1个文件'))
              }
            },
            trigger: 'change'
          }
        ],
        marketResearchDocument: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (Array.isArray(value) && value.length > 0) {
                callback()
              } else {
                callback(new Error('校区市调表至少上传1个文件'))
              }
            },
            trigger: 'change'
          }
        ],
        openingCalendarDocs: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (Array.isArray(value) && value.length > 0) {
                callback()
              } else {
                callback(new Error('开业后一个月行事历至少上传1个文件'))
              }
            },
            trigger: 'change'
          }
        ],
        priceDocument: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (Array.isArray(value) && value.length > 0) {
                callback()
              } else {
                callback(new Error('价格表文档至少上传1个文件'))
              }
            },
            trigger: 'change'
          }
        ],
        campusEnvironmentPhotos: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (Array.isArray(value) && value.length > 0) {
                callback()
              } else {
                callback(new Error('校区环境照片至少上传1张'))
              }
            },
            trigger: 'change'
          }
        ],
        enrollmentInfo: [{ required: true, message: '落地辅导前招生情况不能为空', trigger: 'blur' }],
        evaluationContent: [{ required: true, message: '补充内容不能为空', trigger: 'blur' }]
      },
      brandOptions: [],
      campusOptions: [],
      instructorOptions: [],
      rateColors: ['#F56C6C', '#E6A23C', '#E6A23C', '#67C23A', '#67C23A'],
      datePickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      }
    }
  },
  computed: {},
  async created() {
    await this.loadDictionaryData()
    // 注意：不要在这里调用convertBackendDataToCareServices，应该在数据加载后调用
  },
  methods: {
    // 获取初始表单数据
    getInitialFormData() {
      return {
        id: '',
        campusId: '',
        campusBrand: '',
        openingDate: '',
        guidanceDates: [],
        guidanceStaff: '',
        instructorId: '',
        instructorName: '',
        openingType: '',
        campusName: '',
        // 新增：校区容量相关字段（与后端DTO一致，可空）
        degreeCount: null,
        bedCount: null,
        // 托管服务字段（与后端DTO一致）
        lunchCareCount: null,
        eveningCareCount: null,
        fullCareCount: null,
        summerCareCount: null,
        winterCareCount: null,
        preschoolCareCount: null,
        // 现用收费字段（与模板/计算一致）
        lunchCareFee: null,
        lunchFeeCycle: 'month',
        eveningCareFee: null,
        eveningFeeCycle: 'month',
        fullCareFee: null,
        fullFeeCycle: 'month',
        summerCareFee: null,
        summerFeeCycle: 'month',
        winterCareFee: null,
        winterFeeCycle: 'month',
        preschoolCareFee: null,
        preschoolFeeCycle: 'month',
        totalCareCount: 0,
        expectedIncome: '',
        // 托管服务项目（动态添加）
        careServices: [],
        otherServices: [],
        // 评分字段（统一命名）：营销力/执行力/沟通力/团队管理（1-5星）
        marketingScore: 0,
        executionScore: 0,
        communicationScore: 0,
        teamManagementScore: 0,
        evaluationContent: '',
        openingPlanDocs: [],
        marketResearchDocument: [],
        openingCalendarDocs: [],
        priceDocument: [],

        // 与后端DTO一致的图片字段
        campusEnvironmentPhotos: [],
        dailyProcessPhotos: [],
        teamStylePhotos: [],
        openingActivityPhotos: [],
        // 新增：备注字段
        remark: ''
      }
    },
    // 重置表单
    resetForm() {
      this.dataForm = this.getInitialFormData()
      this.$nextTick(() => {
        if (this.$refs.dataForm) {
          this.$refs.dataForm.clearValidate()
        }
      })
    },
    async loadDictionaryData() {
      try {
        // 加载校区品牌数据字典
        this.brandOptions = await getDictionaryData(DICTIONARY_TYPES.BRAND)
        this.careServiceOptions = await getDictionaryData(DICTIONARY_TYPES.CARE_SERVICE)
      } catch (error) {
        console.error('加载数据字典失败:', error)
        this.$message.error('加载数据字典失败')
      }
    },

    /**
     * 从服务代码获取字段前缀
     * @param {string} serviceCode 服务代码
     * @returns {string} 字段前缀
     */
    getFieldPrefixFromServiceCode(serviceCode) {
      // 服务代码与字段前缀的映射关系
      // 注意：这里的键是数据字典中的enCode值
      const codeToPrefix = {
        lunchCare: 'lunch',
        eveningCare: 'evening',
        fullCare: 'full',
        summerCare: 'summer',
        winterCare: 'winter',
        preschoolCare: 'preschool'
      }

      // 如果是已知的服务代码，直接返回对应前缀
      if (codeToPrefix[serviceCode]) {
        return codeToPrefix[serviceCode]
      }

      // 对于新增的服务代码，尝试从服务代码中提取前缀
      // 假设服务代码格式为 camelCase，转换为小写作为前缀
      return serviceCode.toLowerCase()
    },

    /**
     * 将后端数据转换为托管服务项目列表
     * 基于数据字典动态加载托管服务项目数据
     */
    convertBackendDataToCareServices() {
      // 确保careServices数组已初始化
      if (!this.dataForm.careServices) {
        this.$set(this.dataForm, 'careServices', [])
      }

      // 清空现有托管服务项目列表
      this.dataForm.careServices = []

      // 服务类型字段映射表，避免重复switch语句
      const serviceFieldMap = {
        lunchCare: {
          countField: 'lunchCareCount',
          feeField: 'lunchCareFee',
          cycleField: 'lunchFeeCycle'
        },
        eveningCare: {
          countField: 'eveningCareCount',
          feeField: 'eveningCareFee',
          cycleField: 'eveningFeeCycle'
        },
        fullCare: {
          countField: 'fullCareCount',
          feeField: 'fullCareFee',
          cycleField: 'fullFeeCycle'
        },
        summerCare: {
          countField: 'summerCareCount',
          feeField: 'summerCareFee',
          cycleField: 'summerFeeCycle'
        },
        winterCare: {
          countField: 'winterCareCount',
          feeField: 'winterCareFee',
          cycleField: 'winterFeeCycle'
        },
        preschoolCare: {
          countField: 'preschoolCareCount',
          feeField: 'preschoolCareFee',
          cycleField: 'preschoolFeeCycle'
        }
      }

      // 基于数据字典动态加载托管服务项目
      if (this.careServiceOptions && this.careServiceOptions.length > 0) {
        // 遍历所有托管服务类型
        this.careServiceOptions.forEach(serviceOption => {
          const serviceCode = serviceOption.enCode
          const fieldMap = serviceFieldMap[serviceCode]

          // 跳过未知的服务类型
          if (!fieldMap) return

          const { countField, feeField, cycleField } = fieldMap

          // 检查后端数据中是否存在对应字段的值，且值不为0
          if (this.dataForm[countField] !== null && this.dataForm[countField] !== undefined && Number(this.dataForm[countField]) > 0) {
            // 确保数据类型正确
            const studentCount = Number(this.dataForm[countField]) || 0
            const fee = parseFloat(this.dataForm[feeField]) || 0
            const feeCycle = this.dataForm[cycleField] || 'month'

            // 只有当学生数量大于0且费用有效时才添加
            if (studentCount > 0) {
              // 添加到托管服务项目列表
              this.dataForm.careServices.push({
                serviceCode: serviceCode,
                serviceName: serviceOption.fullName,
                studentCount: studentCount,
                fee: fee,
                feeCycle: feeCycle
              })
            }
          }
        })
      }

      // 重建托管服务项目校验规则
      this.$nextTick(() => {
        this.rebuildCareServiceRules()
      })
    },

    // 添加托管服务项目
    addCareService() {
      // 阻止表单验证
      this.$refs['dataForm'].clearValidate()

      this.dataForm.careServices.push({
        serviceCode: '',
        studentCount: 0,
        fee: '',
        feeCycle: 'month'
      })
      this.rebuildCareServiceRules()
      this.$nextTick(() => {
        this.calculateMonthlyIncome()
      })
    },
    // 删除托管服务项目
    removeCareService(index) {
      // 获取要删除的服务类型
      const serviceToRemove = this.dataForm.careServices[index]
      const serviceType = serviceToRemove.serviceCode

      // 从数组中移除
      this.dataForm.careServices.splice(index, 1)

      // 如果该服务类型有对应的后端字段，将其设置为null
      const prefix = this.getFieldPrefixFromServiceCode(serviceType)
      if (prefix) {
        this.dataForm[`${prefix}CareCount`] = null
        this.dataForm[`${prefix}CareFee`] = null
        // 保留周期默认值
        this.dataForm[`${prefix}FeeCycle`] = 'month'
      }

      this.rebuildCareServiceRules()
      this.$nextTick(() => {
        this.calculateMonthlyIncome()
      })
    },

    // 检查服务类型是否已被使用
    isServiceTypeUsed(code, currentIndex) {
      return this.dataForm.careServices.some((item, index) => {
        return index !== currentIndex && item.serviceCode === code
      })
    },
    // 格式化托管服务费用
    formatCareServiceFee(index, value) {
      if (value === '') {
        this.dataForm.careServices[index].fee = ''
        return
      }

      const numValue = parseFloat(value)
      if (isNaN(numValue)) {
        this.dataForm.careServices[index].fee = ''
      } else {
        this.dataForm.careServices[index].fee = numValue.toString()
      }
      this.calculateMonthlyIncome()
    },
    // 托管服务类型变更处理
    onCareServiceChange(index) {
      this.calculateMonthlyIncome()
    },
    // 重建托管服务校验规则
    rebuildCareServiceRules() {
      const careServicesRules = {}

      this.dataForm.careServices.forEach((_, index) => {
        careServicesRules[`careServices.${index}.serviceCode`] = [{ required: true, message: '请选择托管服务类型', trigger: 'change' }]
        careServicesRules[`careServices.${index}.studentCount`] = [{ required: true, message: '请输入招生人数', trigger: 'blur' }]
        careServicesRules[`careServices.${index}.fee`] = [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === '' || value === null || value === undefined) {
                callback(new Error('服务收费不能为空'))
              } else if (isNaN(parseFloat(value))) {
                callback(new Error('服务收费需为数字'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      })
      this.dataRules = {
        ...this.dataRules,
        ...careServicesRules
      }
    },
    // 添加其他服务项目
    addOtherService() {
      // 阻止表单验证
      this.$refs['dataForm'].clearValidate()

      this.dataForm.otherServices.push({
        serviceName: '',
        studentCount: 0,
        fee: '',
        feeCycle: 'month' // 默认按月收费
      })
      this.$nextTick(() => {
        this.rebuildOtherServiceRules()
      })
    },
    // 删除其他服务项目
    removeOtherService(index) {
      this.dataForm.otherServices.splice(index, 1)
      // 删除其他服务后重新计算月收入
      this.calculateMonthlyIncome()
      this.$nextTick(() => {
        this.rebuildOtherServiceRules()
      })
    },

    // 重建其他收费项目校验规则（当列表变化时）
    rebuildOtherServiceRules() {
      // 清理旧的规则
      Object.keys(this.dataRules).forEach(key => {
        if (key.startsWith('otherServices.')) {
          this.$delete(this.dataRules, key)
        }
      })
      const arr = this.dataForm.otherServices || []
      arr.forEach((_, idx) => {
        this.$set(this.dataRules, `otherServices.${idx}.serviceName`, [{ required: true, message: '服务内容不能为空', trigger: 'blur' }])
        this.$set(this.dataRules, `otherServices.${idx}.studentCount`, [{ type: 'number', required: true, message: '招生人数不能为空', trigger: 'change' }])
        this.$set(this.dataRules, `otherServices.${idx}.fee`, [
          {
            validator: (rule, value, callback) => {
              if (value === '' || value === null || value === undefined) {
                callback(new Error('服务收费不能为空'))
              } else if (isNaN(parseFloat(value))) {
                callback(new Error('服务收费需为数字'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ])
      })
    },

    // 其他服务收费格式化
    formatOtherServiceFee(index, value) {
      const arr = this.dataForm.otherServices || []
      if (arr[index]) {
        arr[index].fee = value
        this.calculateMonthlyIncome()
      }
    },

    // 自动计算托管总人数（午托 + 晚托 + 全托）
    // 托管服务人数现在完全由动态服务项目计算

    // 计算预计月收入
    calculateMonthlyIncome() {
      let monthlyIncome = 0

      // 计算动态托管服务项目的月收入
      if (this.dataForm.careServices && this.dataForm.careServices.length > 0) {
        let totalCareCount = 0

        // 使用reduce方法优化计算逻辑
        const careServiceIncome = this.dataForm.careServices.reduce((acc, service) => {
          if (service.fee && service.studentCount) {
            const fee = parseFloat(service.fee) || 0
            const count = parseInt(service.studentCount) || 0
            totalCareCount += count

            // 使用对象映射优化周期转换逻辑
            const cycleFactors = {
              semester: 1 / 4.5, // 按学期收费转换为月收费
              week: 4, // 按周收费：一个月按4周折算
              day: 22, // 按天收费：一个月按22天计算
              year: 1 / 12, // 按年收费：一个月按1/12年计算
              month: 1 // 按月收费直接使用
            }

            const factor = cycleFactors[service.feeCycle] || 1
            return acc + fee * count * factor
          }
          return acc
        }, 0)

        monthlyIncome += careServiceIncome

        // 更新托管总人数
        this.dataForm.totalCareCount = totalCareCount
      }

      // 其他服务收费（转换为月收入）× 其他服务人数
      if (this.dataForm.otherServices && this.dataForm.otherServices.length > 0) {
        // 使用reduce方法优化其他服务收费计算
        const otherServiceIncome = this.dataForm.otherServices.reduce((acc, service) => {
          if (service.fee) {
            const serviceFee = parseFloat(service.fee) || 0
            const serviceCount = parseInt(service.studentCount) || 0

            // 使用对象映射优化周期转换逻辑，与托管服务保持一致
            const cycleFactors = {
              semester: 1 / 4.5, // 按学期收费转换为月收费
              week: 4, // 按周收费：一个月按4周折算
              day: 22, // 按天收费：一个月按22天计算
              year: 1 / 12, // 按年收费：一个月按1/12年计算
              month: 1 // 按月收费直接使用
            }

            const factor = cycleFactors[service.feeCycle] || 1
            return acc + serviceFee * serviceCount * factor
          }
          return acc
        }, 0)

        monthlyIncome += otherServiceIncome
      }

      // 更新预计月收入，保留2位小数
      this.dataForm.expectedIncome = monthlyIncome > 0 ? monthlyIncome.toFixed(2) : ''
    },
    // 移除金额格式化方法

    // 计算综合评分（四项评分点相加，25分制，总分100）
    calculateAverageScore() {
      const points = [this.starToPoints(this.dataForm.executionScore), this.starToPoints(this.dataForm.marketingScore), this.starToPoints(this.dataForm.teamManagementScore), this.starToPoints(this.dataForm.communicationScore)]
      const total = points.reduce((sum, p) => sum + (isNaN(p) ? 0 : p), 0)
      return Math.round(total * 10) / 10
    },

    // 星级转换为分值（每颗星5分，保留一位小数）
    starToPoints(stars) {
      const s = Number(stars || 0)
      if (isNaN(s) || s <= 0) return 0
      return Math.round(s * 5 * 10) / 10
    },

    // 获取综合评分文本（五级：90-100 非常优秀，80-89 优秀，70-79 良好，60-69 一般，<60 不足）
    getScoreText(score) {
      const s = Number(score || 0)
      if (s >= 90) return '非常优秀'
      if (s >= 80) return '优秀'
      if (s >= 70) return '良好'
      if (s >= 60) return '一般'
      return '不足'
    },

    // 获取单项评分等级文本（25分制：21-25 优秀，16-20 较好，11-15 一般，6-10 不足，1-5 较差）
    getRatingText(points) {
      if (points == null) return ''
      const p = Number(points || 0)
      if (p >= 21) return '优秀'
      if (p >= 16) return '较好'
      if (p >= 11) return '一般'
      if (p >= 6) return '不足'
      if (p > 0) return '较差'
      return ''
    },

    // 获取单项评分样式类（25分制阈值，与文案一致：≥21 优秀，≥16 较好，≥11 一般，其余不足/较差）
    getRatingClass(points) {
      const p = Number(points || 0)
      if (p >= 21) return 'rating-excellent'
      if (p >= 16) return 'rating-good'
      if (p >= 11) return 'rating-average'
      return 'rating-poor'
    },

    selfGetInfo() {
      getGuidanceInfo(this.setting.id).then(res => {
        this.dataForm = res.data
      })
    },

    // 提交前处理数据，将动态托管服务项目映射到对应字段
    processCareServicesBeforeSubmit() {
      // 重置所有托管服务相关字段为null
      this.dataForm.lunchCareCount = null
      this.dataForm.eveningCareCount = null
      this.dataForm.fullCareCount = null
      this.dataForm.summerCareCount = null
      this.dataForm.winterCareCount = null
      this.dataForm.preschoolCareCount = null

      this.dataForm.lunchCareFee = null
      this.dataForm.eveningCareFee = null
      this.dataForm.fullCareFee = null
      this.dataForm.summerCareFee = null
      this.dataForm.winterCareFee = null
      this.dataForm.preschoolCareFee = null

      this.dataForm.lunchFeeCycle = 'month'
      this.dataForm.eveningFeeCycle = 'month'
      this.dataForm.fullFeeCycle = 'month'
      this.dataForm.summerFeeCycle = 'month'
      this.dataForm.winterFeeCycle = 'month'
      this.dataForm.preschoolFeeCycle = 'month'

      // 遍历动态托管服务项目，映射到对应字段
      this.dataForm.careServices.forEach(service => {
        const serviceType = service.serviceCode
        const prefix = this.getFieldPrefixFromServiceCode(serviceType)

        if (prefix) {
          // 映射人数
          this.dataForm[`${prefix}CareCount`] = parseInt(service.studentCount) || null

          // 映射收费
          this.dataForm[`${prefix}CareFee`] = service.fee || null

          // 映射收费周期
          this.dataForm[`${prefix}FeeCycle`] = service.feeCycle || 'month'
        }
      })
    },

    // 准备提交数据
    prepareSubmitData() {
      // 先处理托管服务项目映射
      this.processCareServicesBeforeSubmit()

      const submitData = { ...this.dataForm }
      // 处理其他收费项目：映射为后端期望结构
      if (submitData.otherServices && submitData.otherServices.length > 0) {
        submitData.otherServices = submitData.otherServices.map(item => ({
          serviceName: item.serviceName || item.itemName || '',
          studentCount: parseInt(item.studentCount != null ? item.studentCount : item.count) || 0,
          fee: parseFloat(item.fee) || 0,
          feeCycle: item.feeCycle || 'month'
        }))
      }
      // 计算并提交运营力总分（四项25分合计，满分100分）
      submitData.totalOperationScore = this.calculateAverageScore()
      return submitData
    },
    // 表单提交处理
    selfSubmit() {
      this.dataForm.status = this.eventType === 'submit' ? 0 : 1
      if (this.eventType === 'save') return this.selfHandleRequest()
      this.$confirm('您确定要提交当前流程吗, 是否继续?', '提示', {
        type: 'warning'
      })
        .then(() => {
          this.selfHandleRequest()
        })
        .catch(() => {})
    },

    // 品牌变更处理
    handleBrandChange(value) {
      if (value) {
        this.dataForm.campusId = ''
        this.getCampusList()
      }
    },
    /**
     * 当选择开业校区时，根据选中的campusId
     * 在campusOptions中找到对应项，将中文全称(fullName)
     * 赋值到dataForm.campusName，供后端提交使用。
     * 并自动从校区信息接口预填学位数与床位数。
     * @param {string} value 选中的校区ID（字符串）
     */
    async onCampusChange(value) {
      if (!value) {
        this.dataForm.campusName = ''
        this.dataForm.degreeCount = null
        this.dataForm.bedCount = null
        return
      }
      const target = (this.campusOptions || []).find(item => String(item.id) === String(value))
      this.dataForm.campusName = target ? target.fullName || '' : ''
      this.dataForm.degreeCount = target ? target.degreeCount || 0 : 0
      this.dataForm.bedCount = target ? target.bedCount || 0 : 0
    },

    // 加载校区下拉选项
    async getCampusList() {
      try {
        this.campusLoading = true
        const params = { brand: this.dataForm.campusBrand, fields: 'id,fullName' }
        if (!this.dataForm.id) {
          params.stars = 'normal,preparation,suspended'
        }
        const res = await getCampusSelector(params)
        this.campusOptions = Array.isArray(res.data) ? res.data : []
      } catch (error) {
        console.error('加载校区列表失败:', error)
        this.$message && this.$message.error('校区列表加载失败')
        this.campusOptions = []
      } finally {
        this.campusLoading = false
      }
    },
    // 评分变更处理
    handleRateChange(field, value) {
      this.dataForm[field] = value
    },

    // 辅助：规范日期为 yyyy-MM-dd 字符串
    normalizeDateToYMD(val) {
      if (!val) return ''
      if (typeof val === 'string') {
        const m = val.match(/^(\d{4}-\d{2}-\d{2})/)
        return m ? m[1] : val
      }
      if (typeof val === 'number') {
        const d = new Date(val)
        const y = d.getFullYear()
        const m = String(d.getMonth() + 1).padStart(2, '0')
        const day = String(d.getDate()).padStart(2, '0')
        return `${y}-${m}-${day}`
      }
      if (val instanceof Date) {
        const y = val.getFullYear()
        const m = String(val.getMonth() + 1).padStart(2, '0')
        const day = String(val.getDate()).padStart(2, '0')
        return `${y}-${m}-${day}`
      }
      return ''
    },
    // 统一将数组型字段从 null/非数组归一化为 []
    normalizeArrayFields() {
      const arrayKeys = ['openingPlanDocs', 'marketResearchDocument', 'openingCalendarDocs', 'priceDocument', 'campusEnvironmentPhotos', 'dailyProcessPhotos', 'teamStylePhotos', 'openingActivityPhotos', 'guidanceDates', 'otherServices']
      arrayKeys.forEach(key => {
        const val = this.dataForm[key]
        if (!Array.isArray(val)) {
          this.$set(this.dataForm, key, [])
        }
      })
    },
    selfHandleRequest() {
      if (!this.dataForm.id) delete this.dataForm.id
      this.$refs.dataForm.validate(async valid => {
        if (!valid) {
          return false
        }
        try {
          const submitData = this.prepareSubmitData()
          submitData.status = this.eventType === 'submit' ? 0 : 1
          if (submitData.id) {
            await updateGuidance(submitData)
            this.$message({
              message: '更新成功',
              type: 'success',
              duration: 1000,
              onClose: () => {
                this.$emit('close', true)
              }
            })
          } else {
            await saveGuidance(submitData)
            this.$message({
              message: '保存成功',
              type: 'success',
              duration: 1000,
              onClose: () => {
                this.$emit('close', true)
              }
            })
          }
          this.visible = false
        } catch (error) {
          console.error('提交失败:', error)
          this.$message.error('操作失败，请重试')
        } finally {
        }
      })
    },
    // FlowBox组件调用的初始化方法
    handleCancel() {
      this.$emit('close', false)
    },
    async init(data) {
      if (data && data.id) {
        try {
          this.setting = data
          this.dataForm.id = data.id || ''
          const res = await getGuidanceInfo(data.id)
          const info = res && res.data ? res.data : {}

          // 填充表单数据（保留现有字段结构）
          this.dataForm = Object.assign(this.getInitialFormData(), info)

          // 归一化数组字段，防止上传组件接收到 null
          this.normalizeArrayFields()

          // 规范化开业日期显示
          if (this.dataForm.openingDate) {
            this.dataForm.openingDate = this.normalizeDateToYMD(this.dataForm.openingDate)
          }

          // 将后端数据转换为托管服务项目列表
          this.convertBackendDataToCareServices()

          // 根据品牌加载校区选项，并统一值类型
          if (this.dataForm.campusBrand) {
            await this.getCampusList()
          }

          // 确保campusId为字符串类型
          if (this.dataForm.campusId) {
            this.dataForm.campusId = String(this.dataForm.campusId)
          }

          // 解析文件列表与图片资源
          if (info.fileJson) {
            try {
              this.fileList = JSON.parse(info.fileJson)
            } catch (_) {
              this.fileList = []
            }
          }

          /* moved dataFormSubmit to methods root */
        } catch (error) {
          console.error('加载详情失败:', error)
          this.resetForm()
          this.$message.error('加载详情失败')
        } finally {
        }
      } else {
        // 如果没有数据，重置表单
        this.resetForm()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.section-card {
  margin-bottom: 16px;
}
.section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.subsection-card {
  margin-top: 10px;
}
.section-divider {
  height: 1px;
  background-color: #ebeef5;
  margin: 16px 0;
}
.trusteeship-summary {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
}
.detail-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.other-services-section {
  .other-services-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  .other-services-title {
    font-weight: 600;
    color: #606266;
  }
  .other-service-item {
    padding: 12px;
    border: 1px dashed #ebeef5;
    border-radius: 6px;
    margin-bottom: 12px;
    background: #fafafa;
  }
}
.no-other-services {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #909399;
  padding: 12px;
  border: 1px dashed #ebeef5;
  border-radius: 6px;
  background: #fafafa;
}
.rating-display {
  display: flex;
  align-items: center;
  gap: 8px;
}
.comprehensive-score {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.upload-section {
  margin-bottom: 15px;
}
.textarea-section {
  margin-top: 15px;
}
/* ===== 输入框组件 ===== */
.input-with-select {
  /* Use deep selectors to style internal Element-UI DOM under scoped styles */
  :deep(.el-input-group__prepend .el-select) {
    width: 120px;
  }

  :deep(.el-input-group__prepend .el-select .el-input__inner) {
    border: none;
    font-size: var(--font-size-base);
    background-color: #a4a4a5;
  }

  :deep(.el-input-group__prepend .el-select .el-input__suffix) {
    right: var(--spacing-xs);
  }

  :deep(.el-input-group__prepend) {
    background-color: #a4a4a5;
  }

  :deep(.el-input__inner) {
    border-left: none;
    background-color: #a4a4a5;
  }

  :deep(.el-select .el-input__inner) {
    background-color: #a4a4a5;
  }

  // &:hover .el-input-group__prepend {
  //   border-color: var(--color-text-placeholder);
  // }

  // &.is-focus .el-input-group__prepend {
  //   border-color: var(--color-primary);
  // }
}
/* ===== 表单项组件 ===== */
.vertical-form-item {
  margin-bottom: 25px;
}

.vertical-label {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text-regular);
  margin-bottom: var(--spacing-xs);
  line-height: 1.4;
}

/* 垂直布局表单项样式 */
.vertical-form-item.el-form-item {
  display: flex !important;
  flex-direction: column !important;

  .el-form-item__label {
    float: none !important;
    display: block !important;
    text-align: left !important;
    width: auto !important;
    margin-bottom: var(--spacing-sm) !important;
    line-height: 1.5;
    margin-right: 0 !important;
  }

  .el-form-item__content {
    margin-left: 0 !important;
    width: 100% !important;
  }

  &.is-required {
    .el-form-item__label::before {
      display: none !important;
    }

    .vertical-label::before {
      content: '*';
      color: var(--color-danger);
      margin-right: var(--spacing-sm);
    }
  }
}

.vertical-form-item .el-form-item__content {
  margin-left: 0 !important;
  width: 100% !important;
  margin-top: var(--spacing-sm);
}

@media (max-width: 1200px) {
  .detail-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .detail-row {
    grid-template-columns: 1fr;
  }
}
</style>
